<template>
  <el-dialog
    :visible.sync="visible"
    style="max-height: 800px; overflow-y: auto"
    :close-on-click-modal="false"
    append-to-body
     @close="handleClose"
  >
    <div class="total">
      <body>
        <div id="printContent" class="window">
          <div class="printArea">
            <div class="grid-container">
              <div class="header">
                <div class="title">
                  <span class="header-text">阜丰出门证</span>
                </div>
              </div>
              <div class="row">
                <span class="label">单据编号:</span>
                <span class="value"> {{ formData.czbh }}</span>
              </div>
              <div class="row">
                <span class="label">车 牌 号 :</span>
                <span class="value">{{ formData.chehao }}</span>
              </div>
              <div class="row">
                <span class="label">供货单位:</span>
                <span class="value">{{ formData.gysdm }}</span>
              </div>
              <div class="row">
                <span class="label">货物名称:</span>
                <span class="value">{{ formData.wlmc }}</span>
              </div>
              <div class="row">
                <span class="label">操作员:</span>
                <span class="value">{{ formData.czy }}</span>
              </div>
              <div class="text-center">车辆凭此票出门</div>
              <div class="item7">
                <div class="text-center" id="qrcode-chumen"></div>
              </div>
              <div class="item8"></div>
              <!-- QR Code section -->
              <span id="id48k">齐齐哈尔龙江阜丰</span>
              <span id="i08ej">生物科技有限公司</span>
              <span id="ialos">东丰分公司</span>
              <div class="info-text">
                {{ formData.dbh }}称毛重,{{ formData.dbh2 }}称皮重
              </div>
              <div class="footer">
                <div class="company-name"></div>
                <div class="company-name"></div>
                <div class="company-name"></div>
              </div>
              <div class="bottom-info"></div>
            </div>
          </div>
        </div>
      </body>
    </div>

    <el-button type="primary" class="common-button" v-print="printOptions"
      >打印html</el-button
    >
    <el-button type="primary" class="common-button" @click="code"
      >二维码</el-button
    >
  </el-dialog>
</template>
    
    <script>
import QRCode from "qrcodejs2";

export default {
  components: {
    QRCode,
  },
  props: {
    formData: {},
  },
  data() {
    return {
      printOptions: {
        id: "printContent",
        popTitle: "打印文档",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        beforeOpenCallback() {
          console.log("打印窗口即将打开");
        },
        openCallback() {
          console.log("打印窗口已打开");
        },
        closeCallback() {
          console.log("打印窗口已关闭");
        },
      },
      form: {},
      visible: false,
    };
  },
  // watch:{
  //   formData(newText){
  //     console.log(newText)
  //     this.$nextTick(() => {
  //       this.code();
  //     })
  //   }
  // },
  // mounted(){
  //   this.$nextTick(() => {
  //       this.code();
  //     })
  // },
  methods: {
    handleClose(){
        console.log("出门证 退出")
        this.visible=false;
    },
    code() {
      this.qrcode(200, 180, this.formData.czbh, "canvas");
    },

    /**
     * @description 生成二维码
     * @param  {number} qWidth  宽度
     * @param  {number} qHeight  高度
     * @param  {string} qText  二维码内容（跳转连接）
     * @param  {string} qRender 渲染方式（有两种方式 table和canvas，默认是canvas）
     */
    qrcode(qWidth, qHeight, qText, qRender) {
      const container = document.getElementById("qrcode-chumen");
      container.innerHTML = "";
      console.log(container);

      // 生成二维码
      const code = new QRCode(container, {
        text: qText,
        width: qWidth,
        height: qHeight,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    // onWindowLoad() {
    //   console.log("二维码")
    //   this.$refs.qrcode.innerHTML = "";
    //   this.qrcode(124, 124, this.formData.czbh, "canvas");
    // },
    select() {
      console.log("chumenzheng")
      this.visible = true;
      this.$nextTick(() => {
        this.code();
      });
    },
  },
};
</script>
    
    <style scoped>
.total {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
body {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei",
    "Microsoft Jhenghei", sans-serif;
}
.logo path {
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
  stroke-width: 7;
  stroke: rgb(255, 255, 255);
}
.wechat-group img {
  max-width: 220px;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  width: 100%;
}
.welcome-img img {
  width: 100%;
}
.window {
  width: 315px;
  height: 520px;
  background-color: white;
  border: 2px solid black;
}
.printArea {
  width: 280px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}
.grid-container {
  display: grid;
  grid-template-rows: 60px 20px 20px 20px 20px 20px 30px 200px 20px 20px 20px 20px;
}
.header {
  display: grid;
  align-items: center;
  justify-items: center;
}
.header .title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: rgb(51, 51, 51);
}
.row {
  display: flex;
  align-items: center;
  margin-top: 4px;
  margin-right: 0px;
  margin-bottom: 4px;
  margin-left: 0px;
  color: rgb(51, 51, 51);
}
.label {
  font-weight: bold;
  margin-right: 10px;
}
.value {
  margin-left: 5px;
  text-align: center;
  height: 20px;
}
.text-center {
  font-size: 22px;
  text-align: center;
  top: 0px;
  height: 180px;
  width: 200px;
  margin: 0px 40px 0px 40px;
}
.qr-code img {
  width: 200px;
  height: 190px;
}
.footer .company-name {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  color: rgb(51, 51, 51);
}
.bottom-info .info-text {
  text-align: center;
  font-weight: bold;
  color: rgb(51, 51, 51);
}
.header-text {
  color: rgb(51, 51, 51);
}
.info-text {
  text-align: center;
}
.item7 {
  grid-row-start: 8;
  grid-row-end: auto;
}
#id48k {
  text-align: center;
}
#i08ej {
  text-align: center;
}
#ialos {
  text-align: center;
}
</style>
    